
    <!-- Title area -->
    <div class="titleArea">
        <div class="wrapper">
            <div class="pageTitle">
                <h1><img src="<?php echo base_url()?>application/views/images/icons/control/32/plus.png" />&nbsp;&nbsp;New Slide</h1>
            </div>

            <div class="clear"></div>
        </div>
    </div>
    
    <div class="line"></div>
    
    <!-- Main content wrapper -->
    <div class="wrapper">
        
        <!-- Form -->
        <form action="<?php echo site_url()?>/c_slide/save_new" method="post" class="form" id="validate">
            <fieldset>
                <div class="formRow">
                    <label>Slide Name:<span class="req">*</span></label>
                    <div class="formRight"><input type="text" name="name" id="name" class="validate[required]" value="" autocomplete="on" /></div>
                    <div class="clear"></div>
                </div>
                
                <div class="formRow">
                	<label>Image<span class="req">*</span></label>
                    <div class="formRight">
                        <!-- image  -->
                        <div id="view_picture" style="border:#CCC 1px solid; padding:2px; width:100%; text-align:center; cursor:pointer;"></div>
                        <!--<button onclick="getFile();" id="upload" type="button" >Upload</button>-->
                        <input type="button" value="Upload" id="upload" onclick="getFile();"/>
                        <input type="button" value="Delete" onclick="delete_file();"/>
                        
                        <input id="userfile" name="userfile"  type="file" style="display:none;" />
                        <input type="hidden" name="image" id="image"/>
                        <label id="file_name">Pleas upload!</label>
                    </div>
                    
                    <div class="clear"></div>
                </div>
            </fieldset>
            <div class="wizButtons"> 
                <div class="status" id="status1"></div>
                <span class="wNavButtons">
                    <input class="basic" id="back1" value="Back" type="button" onclick="window.location = '<?php echo site_url()?>/c_slide/';" />
                    <input class="blueB ml10" id="next1" value="Save" type="submit" />
                </span>
            </div>
            <div class="clear"></div>
        </form>

    </div>
	
    <script type="application/javascript">
		/**
		 * Load window brows file
		 */
		function getFile(){
			 document.getElementById("userfile").click();
		}
		/**
		 * Upload file 
		 */
		(function () {
			var input = document.getElementById("userfile"), 
				formdata = false;
		
			function showUploadedItem (source) {
				
			}   
		
			if (window.FormData) {
				formdata = new FormData();
			}
			
			input.addEventListener("change", function (evt) {
				document.getElementById("file_name").innerHTML = "Uploading . . ."
				var i = 0, len = this.files.length, img, reader, file;
			
				for ( ; i < len; i++ ) {
					file = this.files[i];
			
						if ( window.FileReader ) {
							reader = new FileReader();
							reader.onloadend = function (e) { 
								showUploadedItem(e.target.result, file.fileName);
							};
							reader.readAsDataURL(file);
						}
						if (formdata) {
							formdata.append("userfile", file);
						}
				}
			
				if (formdata) {
					jQuery.ajax({
						url: "<?php echo site_url();?>/c_file/upload_file/slides/",
						type: "POST",
						data: formdata,
						processData: false,
						contentType: false,
						success: function (res) {
							document.getElementById("view_picture").innerHTML = '<img width="100%"  src="<?= base_url().'upload/slides/' ?>'+res+'" />';
							document.getElementById("file_name").innerHTML = res; 
							document.getElementById("image").value = res; 
							
							formdata = new FormData();//clear the old file that remember
						}
					});
				}
			}, false);
		}());
		
		/*
		delete file
		*/
		function delete_file(){
			var result = confirm("Are you sure you want to delete?");
			if (result == true) {
			  $.ajax({
				   type: "POST",
				   url: "<?php echo site_url();?>/c_file/delete_file/slides/" + document.getElementById("image").value,
				   data: 'image='+document.getElementById("image").value, // paramenter & value
				   cache: false,
				   success: function(){
					document.getElementById("view_picture").innerHTML = "Picture deleted from server";
					document.getElementById("file_name").innerHTML = "Pleas upload"; 
					document.getElementById("image").value = ""; 
					document.getElementById("userfile").value = "";
				  }
				 
				 });
			 } 
		}
	</script>